forum

home / developersection / forums / how do i set distance between flexbox items?

Ask Question
Sandra Emily

Student

Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

06-Jun-2024

Set distance between flexbox items

You can use the gap property to set the distance between flexbox items. The gap property is a brief of row-gap and column-gap, and it specifies the gap between the rows and columns of a grid or flex container.

Using with flexbox

.container {
 display: flex;
 gap: 10px; /* Set the gap between flex items */
}

In the above syntax, The gap property is applied to a flex container with the .container class, and it sets a gap of 10px between flex items.

Also, you can use margins on flex items to create space between them

.item {
 margin-right: 10px; /* Set the right margin between flex items */
}

The gap property is recommended for creating space between flex items, as it is cleaner and built-in, especially when working with flexible layouts.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    /* using css gap property */
    .container {
      display: flex;
      gap: 15px; /* Set the distance between flex items */
    }
    /* using css margin property */
    .container-2{
      display: flex;
    }
    .container-2 .item-2{
       margin-right: 15px; /* Set the distance between flex items */
    }
  </style>
</head>

<body>
  <h3>Using "gap" property on parent element</h3>
  <div class="container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
    <div class="item">Item-4</div>
  </div>
  <h3>Using "margin" in flex items</h3>
  <div class="container-2">
    <div class="item-2">Item-1</div>
    <div class="item-2">Item-2</div>
    <div class="item-2">Item-3</div>
    <div class="item-2">Item-4</div>
  </div>

</body>
</html>

Output- 

How do I set distance between flexbox items?

Also, Read: How do you create a button with borderless CSS?

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy